<template>
  <!-- 音频播放器组件 -->
  <div v-if="url" class="audio">
    <div class="title">{{ title }}</div>
    <div class="logo">
      <Image name="audio_logo" oss size="320rpx" />
    </div>
    <div>
      <slider
        :block-size="12"
        :max="duration.toFixed(0)"
        :min="0"
        :step="0.1"
        :value="currentTime.toFixed(0)"
        active-color="#FF8002"
        background-color="#F2F2F2"
        @change="changeAudio"
      />
      <div class="flex_sb_cen time">
        <span>{{ getTime(Math.round(currentTime)) }}</span>
        <span>{{ getTime(Math.round(duration)) }}</span>
      </div>
    </div>
    <div class="audio_btn" @tap="start(audioId)">
      <Icon v-show="status" name="icon-tingzhi" size="124rpx" />
      <Icon v-show="!status" name="icon-bofang" size="124rpx" />
    </div>
  </div>
</template>

<script>
import Icon from '@C/Icon.vue'
import Image from '@C/Image.vue'

const context = uni.createInnerAudioContext()
export default {
  components: { Image, Icon },
  props: {
    title: String,
    url: String,
    audioId: [String, Number], // 必填，且id不可为数字0，建议格式 ‘audio’+数字
  },
  data() {
    return {
      context: null,
      currentTime: 0,
      duration: 0,
      status: false,
    }
  },
  created() {
    context.src = this.url
    this.onTimeUpdate()
    this.onCanplay()
    this.onEnded()
    this.start(this.audioId)
    uni.$on('stop', (id) => {
      if (id && id != this.audioId) {
        context.stop()
        this.status = false
      } else if (!id) {
        context.stop()
        this.status = false
      }
    })
  },
  methods: {
    // 点击播放
    start(id) {
      // const audioId = id
      if (this.status) {
        context.pause()
        this.status = !this.status
      } else {
        uni.$emit('stop', id)
        context.play()
        this.status = !this.status
      }
    },
    // 进入可播放状态
    onCanplay() {
      context.onCanplay(() => {
        // context.duration
        setTimeout(() => {
          this.duration = context.duration
        }, 1000)
      })
    },
    // 音频播放进度
    onTimeUpdate() {
      context.onTimeUpdate(() => {
        if (!Number.isFinite(context.duration)) { // 检测当前音频是否为无穷大
          context.currentTime = Number.MAX_SAFE_INTEGER
          context.currentTime = 0
        } else {
          this.duration = context.duration
          this.currentTime = context.currentTime
        }
      })
    },
    onEnded() { // 播放结束
      context.onEnded(() => {
        this.status = false
        this.currentTime = 0
      })
    },
    changeAudio(e) {
      const paused = context.paused
      context.pause()
      context.seek(e.detail.value)
      if (!paused) {
        context.play()
      }
    },
    getTime(time) {
      const m = parseInt(time / 60)
      const s = time % 60
      return `${this.towNum(m) }:${ this.towNum(s)}`
    },
    towNum(num) {
      if (num >= 10) {
        return num
      }
        return `0${ num}`
    },
  },
}
</script>
<style lang="less" scoped>
.audio {
  padding: 70rpx 56rpx 100rpx 50rpx;
  background-color: #fff;
  .title {
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(0,0,0,0.85);
    line-height: 40rpx;
  }
  .logo {
    width: 320rpx;
    height: 320rpx;
    background: #FFE6CD;
    opacity: 0.6;
    border: 2rpx solid rgba(255,255,255,0.4);
    margin: 136rpx auto 152rpx;
    border-radius: 50%;
  }
  .time {
    font-size: 24rpx;
    color: #272424;
    line-height: 28rpx;
    letter-spacing: 1px;
  }
  .audio_btn {
    margin-top: 24rpx;
    text-align: center;
  }
}
</style>
